<template>
	<div>
		<div class="ele-body">
			<a-card :bordered="false">
				<a-form
					ref="test"
					:label-col="{ xl: { span: 12 }, lg: { span: 12 }, md: { span: 24 }, sm: { span: 24 } }"
					:wrapper-col="{ xl: { span: 12 }, lg: { span: 12 }, md: { span: 24 }, sm: { span: 24 } }"
				>
					<a-row>
						<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
							<a-form-item label="门店">
								<a-select
									optionFilterProp="label"
									:options="storeOptions"
									allow-clear
									placeholder="请选择"
									v-model:value="form.store_code"
									@change="storeChange"
									autocomplete="off"
								/>
							</a-form-item>
						</a-col>
						<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
							<a-form-item label="汇总项（最多可以选择5项）">
								<a-select
									optionFilterProp="label"
									:options="options"
									mode="multiple"
									allow-clear
									placeholder="请选择"
									v-model:value="form.find"
									@change="change"
									autocomplete="off"
								/>
							</a-form-item>
						</a-col>
						<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
							<a-form-item label="期初时间">
								<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择" v-model:value="form.start_time" autocomplete="off" />
							</a-form-item>
						</a-col>
						<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
							<a-form-item label="期末时间">
								<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择" v-model:value="form.end_time" autocomplete="off" />
							</a-form-item>
						</a-col>
						<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
						  <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
						    <a-space>
						      <a-button type="primary" @click="search">查询</a-button>
						      <a-button @click="reset">重置</a-button>
						    </a-space>
						  </a-form-item>
						</a-col>
					</a-row>
				</a-form>
				<a-space class="margin-y-30">
					<a-button type="dashed" class="ele-btn-icon">
						<template #icon>
							<upload-outlined />
						</template>
						<span>导出</span>
					</a-button>
					<a-button type="dashed" class="ele-btn-icon">
						<template #icon>
							<upload-outlined />
						</template>
						<span>打印</span>
					</a-button>
				</a-space>
				<a-table :scroll="{ x: '3500px' }" :row-selection="rowSelection" :data-source="data">
					<a-table-column key="key" title="序号" data-index="key" fixed="left" />
					<a-table-column key="age" title="种类" data-index="age" fixed="left" />
					<a-table-column-group>
						<template #title>
							期初库存
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							采购入库
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							返厂出库
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							分配出库
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							报溢入库
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							报损出库
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							修改调整
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
					<a-table-column-group>
						<template #title>
							期末结余
						</template>
						<a-table-column key="lastName" title="件数" data-index="lastName" />
						<a-table-column key="lastName" title="净金重" data-index="lastName" />
						<a-table-column key="lastName" title="件重" data-index="lastName" />
					</a-table-column-group>
				</a-table>
			</a-card>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { actionFn } from '@/utils/action.js';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { get_list } from '@/api/tenant/store';
import { get_psi_store_list } from '@/api/jewelry/psi_store';
const rowSelection = ref([]);
const data = [
	/* {
		key: '1',
		firstName: 'John',
		lastName: 'Brown',
		age: 32,
		address: 'New York No. 1 Lake Park',
		tags: ['nice', 'developer']
	},
	{
		key: '2',
		firstName: 'Jim',
		lastName: 'Green',
		age: 42,
		address: 'London No. 1 Lake Park',
		tags: ['loser']
	},
	{
		key: '3',
		firstName: 'Joe',
		lastName: 'Black',
		age: 32,
		address: 'Sidney No. 1 Lake Park',
		tags: ['cool', 'teacher']
	} */
];
const form = reactive({
	store_code:'',
	find: ['1'],
	start_time: '',
	end_time: ''
});
const options = [
	{ label: '种类', value: '1' },
	{ label: '款式', value: '2' },
	{ label: '系列', value: '3' },
	{ label: '类别', value: '4' },
	{ label: '成色', value: '5' },
	{ label: '供应商款号', value: '6' }
];
const storeOptions = ref([])
const change = e => {
	form.find = e;
};
const storeChange = e => {
	//console.log(e);  
	form.store_code = e;
};
const search = ()=>{
	getList();
};
const reset = ()=>{
	form.store_code = '';
	form.find =  ['1'];
	form.start_time =  '';
	form.end_time =  '';
};

onMounted(() => {
	get_list({page:1, limit:99999}).then((res)=>{
		res.list.forEach((item, index)=>{
			storeOptions.value.push({
				label:item.name,
				value:item.code
			})
		})
	}).catch(e => {
		message.error(e);
	});
	//getList();
});
const getList = ()=>{
	get_psi_store_list(form)
		.then(res => {})
		.catch(e => {
			message.error(e);
		});
}
</script>
